<template>
	<view>
		<page-head headTitle="南宁市" :user="true" :glide="true" :news="true" :sao="true" 
		 @clickLeftUser="clickLeftUser" @clickGlide="clickCity" @clickRightNews="clickRightNews" @clickRightSao="clickRightSao"></page-head>
		<view class="search-h bg-color fixed fixed-top9" ref="vref"></view>
		<view class="p-t-b3 fixed fixed-top9 orde-pb">
			 <view class="flex flex-1 bg-white search-h justify-content align-center border-r box-shadow m-l-r3">
				<text class="iconfont icon-biaoqing search-icon"></text>
				<input class="search-width" placeholder-class="input-goods fs-2 search-width" type="text" placeholder="请输入商品名称">
		    </view>
			<view class="flex search-h align-center fs-g  bg-white m-t1 p-l-r">
				<view class="flex-1 flex justify-content orde-r fs-3 order-bj" @click="seekGuide">
					<text class="order-text"><image src="/static/images/seek-guide.png" class="seek-guide"></image>找导游</text>
				</view>
				<view class="flex-1 flex justify-content orde-r fs-3" @click="seekDelicacy">
					<text class="order-text" ><image src="/static/images/seek-delicacy.png" class="seek-delicacy"></image>找美食</text>
				</view>
				<view class="flex-1 flex justify-content orde-r fs-3">
					<text class="order-text" @click="privateOrder"><image src="/static/images/personal-tailor.png" class="personal-tailor"></image>私人订制</text>
				</view>
			</view> 
			<view :style="{'height': windowHeight}">
				<map class="width" style="height: 100%;"  :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
		</view>
		<view v-show="isShow">
			<view class="cancel-bj fixed fixed-top" @click="clickLeftHide"></view>
			<view class="left-width bg-white fixed fixed-top">
				<head-pic v-bind:name="userInfo.name" :atte="false" :image="userInfo.avatar" @userClick="userEdit"></head-pic>
				<view class="m-t7 p-l4">
					<head-list listName="订单" imageList="/static/images/order.png" @urlList="orderList"></head-list>
					<head-list listName="预约" imageList="/static/images/make.png" @urlList="bookingOrder"></head-list>
					<head-list listName="设置" imageList="/static/images/setup.png" @urlList="setUp"></head-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import headPic from '@/components/common/head-pic.vue'
import headList from '@/components/common/head-list.vue'
import {mapState,mapMutations} from 'vuex'
	export default {
		components:{
			pageHead,
			headPic,
			headList
		},
		data() {
			return {
				'userInfo':'',
				isShow:false,
				windowHeight:"",
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				text: '',
				type:'scan-listener',
				result:''//获取到的二维码内容，根据自己需求处理结果
			
			}
		},
		computed: mapState(['hasLogin','uerInfo']),  
		onLoad() {
			//获取扫描二维码的数据
			// #ifdef APP-PLUS
			this.$eventHub.$on(this.type, function(data) {
				console.log(data);
				this.text = data;
			});
			// #endif
			//获取手机屏幕的高度
			var _this=this;
			this.userInfo = uni.getStorageSync('userInfo');
			uni.getSystemInfo({
				success: function (res) {
					_this.windowHeight = (res.windowHeight - 157)+"px";
					console.log(_this.windowHeight);
				}
			});
		  },
		  //手机全屏显示
		  onBackPress() {
		  	// #ifdef APP-PLUS
		  	plus.screen.lockOrientation('portrait-primary');
		  	// #endif
		  },
		methods: {
			// 点击用户图标弹出头像框
			clickLeftUser(){
				this.isShow = true;
			},
			userEdit(){
				uni.navigateTo({
					url: '../user-edit/user-edit'
				})
			},
			// 点击隐藏头像框
			clickLeftHide(){
				this.isShow = false;
			},
			// 城市切换
			clickCity(){
				
			},
			// 消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../news-core/news-core'
				});
			},
			// 扫一扫
			clickRightSao(){
				uni.navigateTo({
					url: '../scan-code/scan-code?text=' + this.text + '&type=' + this.type
				});
			},
			//找导游
			seekGuide(){
				uni.navigateTo({
					url: '../seek-guide/seek-guide'
				});
			},
			//找美食
			seekDelicacy(){
				uni.navigateTo({
				    url: '../delicacy/delicacy'
				});
			},
			//私人订制
			privateOrder(){
				uni.navigateTo({
				    url: '../personal-tailor/personal-tailor'
				});
			},
			// 设置
			setUp(){
				uni.navigateTo({
				    url: '../set-up/set-up'
				});
			},
			// 预约订单
			bookingOrder(){
				uni.navigateTo({
				    url: '../booking-order/booking-order'
				});
			},
			// 订单列表
			orderList(){
				uni.navigateTo({
				    url: '../orde-list/orde-list'
				});
			},
			 
		}
	}
</script>

<style scoped>
.search-icon{font-size: 50rpx;color: #AAAAAA;}
page{background-color: #FFFFFF;}
.index-icon{background-color: initial;}
.seek-guide{width: 20rpx;height: 26rpx;margin-top: -8rpx;margin-right: 6rpx;}
.seek-delicacy{width: 27rpx;height: 28rpx;margin-top: -10rpx;margin-right: 8rpx;}
.personal-tailor{width: 24rpx;height: 28rpx;margin-top: -10rpx;margin-right: 8rpx;}
</style>
